<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 155px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">标签名称：</label>
            <el-input
                v-model="searchForm.tagName"
                placeholder="请输入标签名称"
                style="width: 155px"
                clearable
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <el-button
                type="primary"
                @click="handleClick('add')"
            >新增</el-button>
        </div>
    </div>
    <el-table
        :data="roleList"
        style="width: 100%"
        border
    >
        <el-table-column
            type="index"
            label="序号"
            width="55"
        />
        <el-table-column
            prop="depId"
            label="所属单位"
        >
            <template #default="scope">
                {{ depNameTranslate(scope.row.depId) }}
            </template>
        </el-table-column>
        <el-table-column
            prop="tagName"
            label="标签名称"
        />
        <el-table-column
            prop="remark"
            label="备注"
        />
        <el-table-column
            fixed="right"
            label="操作"
            width="190"
        >
            <template #default="scope">
                <el-button
                    text
                    type="primary"
                    size="small"
                    @click="handleClick('edit', scope.row)"
                >编辑</el-button>
                <el-button
                    text
                    type="danger"
                    size="small"
                    @click="handleClick('delete', scope.row)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="paginationStyle"
    />
    <el-dialog
        v-model="addRoleVisible"
        :title="addRoleVisibleName"
        width="700"
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            status-icon
            :inline="true"
        >
            <el-form-item
                label="所属单位："
                prop="depId"
                required
            >
                <el-select
                    v-model="ruleForm.depId"
                    class="m-2"
                    placeholder="请选择所属单位"
                    style="width: 190px"
                    :disabled="localTypeUnit != '1'"
                >
                    <el-option
                        v-for="item in depIdList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item
                label="标签名称："
                prop="tagName"
                required
            >
                <el-input
                    v-model="ruleForm.tagName"
                    style="width: 190px"
                    :disabled="addRoleVisibleType == 'detail'"
                />
            </el-form-item>
            <el-form-item
                label="备注："
                prop="remark"
                style="width: 596px"
            >
                <el-input
                    v-model="ruleForm.remark"
                    :disabled="addRoleVisibleType == 'detail'"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addRoleVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    v-if="addRoleVisibleType !== 'detail'"
                    @click="submitForm(ruleFormRef)"
                >
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import labelHttp from "@/https/label.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
const addRoleVisible = ref(false);
const activeName = ref("first");
const roleList = ref();

const searchForm = reactive({
    depId: "",
    tagName: "",
    pageNo: 1,
    pageSize: 10,
});
const depIdList = ref([
    { label: "全部", value: "" },
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value == '1' ? '' : localTypeUnit.value;
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const search = async () => {
    const res = await labelHttp.tagPageList(searchForm);
    if (res.data.code === 200) {
        roleList.value = res.data.data.records;
        total.value = res.data.data.total;
    }
};
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
const ruleFormRef = ref();
const ruleForm = reactive({
    id: "",
    depId: "",
    tagName: "",
    remark: "",
});
const rules = reactive({
    depId: [
        {
            required: true,
            message: "请输入所属单位",
            trigger: "blur",
        },
    ],
    tagName: [
        {
            required: true,
            message: "请输入标签名称",
            trigger: "blur",
        },
    ],
});
const addRoleVisibleName = ref("新增");
const addRoleVisibleType = ref("add");
const handleClick = (type, row) => {
    ruleForm.tagName = "";
    ruleForm.remark = "";
    addRoleVisibleType.value = type;
    addRoleVisibleName.value =
        type == "add" ? "新增标签" : type == "detail" ? "标签详情" : "编辑标签";
    addRoleVisible.value = type !== "delete";
    if (type == "add") {
        ruleForm.depId = localTypeUnit.value + "";
    } else if (type == "detail" || type == "edit") {
        ruleForm.id = row.id;
        ruleForm.depId = row.depId + "";
        ruleForm.tagName = row.tagName;
        ruleForm.remark = row.remark;
    } else if (type == "delete") {
        ElMessageBox.confirm(`确认删除标签【${row.tagName}】吗？`, `删除`, {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            let params = {
                id: row.id,
            };
            labelHttp.tagDeleteTag(params).then((res) => {
                if (res.data.code === 200) {
                    search();
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            });
        });
    }
};
const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            labelHttp.tagSaveTag(ruleForm).then((res) => {
                if (res.data.code == 200) {
                    addRoleVisible.value = false;
                    ElMessage({
                        message: addRoleVisibleType.value == "add" ? `新增成功` : '修改成功',
                        type: "success",
                    });
                    search();
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            });

        } else {
            ElMessage({
                message: "提交错误",
                type: "danger",
            });
        }
    })
}
onMounted(() => {
    search();
});
</script>
<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.setAuthority {
    padding-left: 10px;
    border-left: 4px solid #409eff;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0;
}

.paginationStyle {
    justify-content: flex-end;
    margin-top: 10px;
}
</style>